<script setup>
const props = defineProps({
      to: {
        type: String,
        required: true,
        default:"/"
      }
    }
)
</script>

<template>
  <router-link v-bind:to="props.to" custom v-slot="{navigate, isActive, isExactActive}">
    <button v-bind:class="['custom-link',{'router-link-active': isActive, 'router-link-exact-active': isExactActive}]" v-on:click="navigate">

      <slot></slot>
    </button>
  </router-link>
</template>

<style scoped>
.custom-link {
  background-color: yellowgreen;
}
</style>